
<template>
  <div style="padding:20px">
      <div class="yuanqu">
        <!-- <div>
          <parklist :getParkDetail="parkChange"></parklist>
        </div> -->
        <div style="display:flex;width: 100%">
          <div style="margin-right: 1.4%;width: 100%">
            <div class="left_baidu" style="overflow: hidden">
              <!-- <img src="../../../assets/img/map.png" style="height:100%" alt=""> -->
              <!-- <div style="margin: 20px; padding: 10px; position: absolute;
                          z-index: 30; font-weight:bold; font-size: 16px;
                          opacity: 0.6; filter: alpha(opacity=60);
                          -moz-opacity: 0.6; color: #2690F3; background: #EAEAEA;">园区地图</div> -->
              <!-- <div style="margin: 20px; position: absolute;
                          right: 0px; heigth: 300px;
                          z-index: 20; font-weight:bold; font-size: 16px;
                          opacity: 0.8; filter: alpha(opacity=80);
                          -moz-opacity: 0.8; background: #FFFFFF;">
                <el-input placeholder="请输入园区名称" v-model="mapInput" class="blue" style="width: 210px; heigth: 60px; margin: 20px 0px 0px 30px;">
                  <el-button type="primary" slot="append" icon="el-icon-search" style="width: 80px; heigth: 30px; color: #FFFFFF;" @click="SearchPark(mapInput)">搜索</el-button>
                </el-input>
                <div style="font-size:16px; margin:20px 20px 20px 20px; font-weight:bold; width:150;">相关园区</div>
                <div style="font-weight:normal; margin: 0px 20px 0px 10px;">
                  <el-table
                    class="left_table"
                    :data="mapparkData"
                    @cell-click="selectTableRowData"
                    :row-style="{height:'20px'}"
                    :cell-style="changeCellStyle"
                    header-row-class-name="table-header"
                    :show-header="false"
                  >
                    <el-table-column prop="parkName" label="园区名称" width="150" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column prop="parkPath" show-overflow-tooltip label="园区地址" width="70">
                    </el-table-column>
                  </el-table>
                </div>
              </div> -->
              <div class="intrdouce">{{msg}}</div>
              <baidu-map
                :center="center"
                :zoom="zoom"
                @ready="handler"
                style="margin: 5px; height: 710px;width: 100%; z-index: 10;"
                @click="getClickInfo"
                :scroll-wheel-zoom="true"
              >
                <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_BOTTOM_RIGHT"></bm-map-type>
              </baidu-map>
            </div>
          </div>
          <div>
            <div class="right_all">
              <el-row class="right_top">
                <!-- <div style="font-size:16px; margin:20px 20px 0px 180px; font-weight:bold; text-align:center; width:150; float: left;">园区经济排名</div> -->
                <div style="font-size:18px; margin:20px;color: #333333;font-weight:700; text-align:center; width:150;">园区经济</div>
                <!-- <el-select v-model="yearSelect" placeholder="请选择" style="width: 115px; heigth: 30px; margin: 10px 0px 0px 20px;">
                  <el-option
                    v-for="item in yearOptions"
                    :key="item.value"
                    :label="item.value"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-select v-model="outputValueSelect" placeholder="请选择" style="width: 130px; heigth: 30px; margin: 20px 10px 0px 20px; float: left;">
                  <el-option
                    v-for="item in outputValueOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-input v-model="parkInput" placeholder="请输入园区名称" style="width: 170px; heigth: 30px; margin: 20px 10px 0px 0px; float: left;"></el-input>
                <el-button type="primary" @click="SearchSort" icon="el-icon-search" style="width: 90px; heigth: 30px; margin: 20px 10px 0px 0px; color: #FFFFFF; background-color: #2690F3;">搜索</el-button>
                <div style="margin:20px 0px 0px 10px;">
                  <el-table
                    class="right_table"
                    :data="economicsTableData"
                    header-row-class-name="table-header"
                    :show-header="true"
                    :header-cell-style="{background: '#EAEAEA'}"
                  >
                    <el-table-column prop="parkName" label="园区名称" width="240" show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column type="index" label="排名" width="70" header-align="center" align="center">
                    </el-table-column>
                    <el-table-column prop="price" label="产值/亿元" width="100">
                    </el-table-column>
                  </el-table>
                </div> -->
                <div ref="parkRank" style="width: 100%;height:290px;"></div>
                <div v-if="parkRankDate === 1" style="color: #909399;text-align: center;margin-top: -50%;">暂无数据</div>
              </el-row>
              <el-row class="right_center">
                <div style="font-size:18px; margin-top:20px; color: #333333; font-weight:700; text-align:center; width:100%;">企业统计</div>
                <div style="display:flex">
                  <el-date-picker
                    v-model="year1"
                    type="year"
                    :picker-options="pickerOptions"
                    :clearable="false"
                    :editable="false"
                    style="width: 110px; margin: 20px 20px 10px 20px"
                    @change="enterpriseStatisticsSelectChange"
                    placeholder="选择年">
                  </el-date-picker>
                  <el-select v-model="enterpriseStatisticsSelect" @change="enterpriseStatisticsSelectChange" style="width: 240px; margin: 20px 0px 10px 35px" placeholder="请选择">
                    <el-option
                      v-for="item in enterpriseStatisticsOptions"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </div>
                
                <div style="width: 440px;height:200px;margin-top:10px;">
                  <el-table 
                    :data="entList"
                    class="customer-table"
                    :row-style="{height:'32px'}"
                    :cell-style="{padding:'0px'}"
                    style="width: 95%;margin-left:10px"
                    height="210px"
                    :header-cell-style="{background:'#F7F8FA', color: '#333333'}">
                    <el-table-column type="index"  label="序号" width="70px" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="entName" :show-overflow-tooltip="true" label="企业名称"></el-table-column>
                  </el-table>
                </div>
                <div v-if="statistics === 1" style="color: #909399;text-align: center;margin-top: -35%;">暂无数据</div>
              </el-row>
            </div>
          </div>
        </div>
      </div>
  </div>
</template>
<script>
/* eslint-disable */
import BaiduMap from 'vue-baidu-map'
import Vue from 'vue'
import parklist from '@/components/parklist'
const echarts = require('echarts')
Vue.use(BaiduMap, {
  ak: 'vZi9dnlQaFQ3LYO8yOdeHjaGjwGWGHy4'
})
export default {
  components: { parklist },
  data () {
    return {
      msg: '',
      //定时器
      intervalId: null,
      
      year1: '',
      selecedYear1: '',
      // 当月以前
      pickerOptions: {
        disabledDate: time => {
          return time.getTime() > new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
        }
      },
      entList:[],

      parkCode: '',
      parkCode2: '', // 取园区介绍用
      center: { lng: 119.406504, lat: 29.54873 },
      centerList:[],
      map:'',
      parkRankDate: 0,
      statistics: 0,
      zoom: 11,
      myChart1: {},
      option1: {
        grid: {
          bottom: '10%'
        },
        legend: {
          orient: 'horizontal',
          left: '3%',
          icon: "rect",
          itemWidth: 12,
          itemHeight: 12,
          textStyle:{
            fontSize:14,
            fontWeight:400
          },
          type:'scroll'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          show:true,
          type: 'category',
          data: []
        },
        yAxis: {
          show:true,
          type: 'value',
          name: '(家)',
          axisTick: {
            show: false
          },
          minInterval:1
        },
        series: []
      },
      option2: {
        grid: {
          bottom: '10%'
        },
        legend: {
          orient: 'horizontal',
          left: '3%',
          icon: "rect",
          itemWidth: 12,
          itemHeight: 12,
          textStyle:{
            fontSize:14,
            fontWeight:400
          },
          type:'scroll'
        },
        tooltip: {
          trigger: 'item'
        },
        xAxis: {
          show:true,
          type: 'category',
          // data: ['2016', '2017', '2018', '2019', '2020', '2021']
          data: []
        },
        yAxis: {
          type: 'value',
          name: '(亿元)',
          axisTick: {
            show: false
          }
        },
        series: [
          // {
          //   name: '杭州市建德高新技术产业园',
          //   type: 'bar',
          //   data: [95, 94, 96, 96, 95, 97],
          //   itemStyle: {
          //     color: '#1492FF'
          //   }
          // }
        ]
      },
      yearSelect: '',
      yearOptions: [],
      outputValueSelect: '1',
      outputValueOptions: [
        {
          label: '产值',
          value: '1'
        },
        {
          label: '企业均产值',
          value: '2'
        },
        {
          label: '亩均产值',
          value: '3'
        }
      ],
      parkInput: '',
      economicsTableData: [
        {
          parkName: '杭州市建德高新技术产业园',
          ranking: '1',
          outputValue: '6000'
        },
        {
          parkName: '萧山临江高新技术产业开发区新材料产业园',
          ranking: '2',
          outputValue: '5800'
        },
        {
          parkName: '天目医药港化工集聚区',
          ranking: '3',
          outputValue: '4000'
        },
        {
          parkName: '象山经济开发区',
          ranking: '4',
          outputValue: '3900'
        },
        {
          parkName: '宁波大榭开发区',
          ranking: '5',
          outputValue: '3300'
        }
      ],
      enterpriseStatisticsSelect: '1',
      enterpriseStatisticsOptions: [
        {
          label: '企业名称',
          value: '1'
        },
        {
          label: '规上企业',
          value: '2'
        },
        {
          label: '含重大危险源企业',
          value: '3'
        },
        {
          label: '安全生产标准化一级企业',
          value: '4'
        }
      ],
      enterpriseSum: [
        {
          name: '杭州市建德高新技术产业园',
          value: '95'
        },
        {
          name: '萧山临江高新技术产业开发区新材料产业园',
          value: '90'
        },
        {
          name: '天目医药港化工集聚区',
          value: '60'
        },
        {
          name: '象山经济开发区',
          value: '55'
        },
        {
          name: '宁波大榭开发区',
          value: '45'
        }
      ],
      mapInput: '',
      mapparkData: [
        {
          parkName: '杭州市建德高新技术产业园',
          parkPath: '杭州建德'
        },
        {
          parkName: '萧山临江高新技术产业开发区新材料产业园',
          parkPath: '杭州钱塘'
        },
        {
          parkName: '天目医药港化工集聚区',
          parkPath: '杭州临安'
        },
        {
          parkName: '象山经济开发区',
          parkPath: '宁波象山'
        },
        {
          parkName: '宁波大榭开发区',
          parkPath: '宁波北仑'
        },
        {
          parkName: '宁波石化经济技术开发区',
          parkPath: '宁波镇海'
        },
        {
          parkName: '宁波经济技术开发区',
          parkPath: '宁波北仑'
        }
      ]
    }
  },
  mounted () {
    this.year1 = new Date()
    this.selecedYear1 = this.year1.getFullYear()

    this.initParkRank()
    this.parkChange(this.$route.query.data)
  },
  methods: {
    start(){
      //如果当前为start，再点击start，则无效，只有当点击stop后再点击start才有效
      if(this.intervalId !=null)
      return;
      //启动计时器
      this.intervalId = setInterval(()=>{
        var start = this.msg.substring(0,1);
        // 获取到 后面的所有字符
        var end  = this.msg.substring(1);
        //前后重新拼接得到新的字符串，并赋值给 this.msg
        this.msg = end + start;
      },800)//200为间隔时间
    },
    // 搜索园区地图
    SearchPark (val) {
      if (this.map) {
        let map = this.map
        // this.mapparkData.forEach((item, index) => {
        //   if (item.parkName === val) {
        //     this.center = {
        //       lng: item.longitude,
        //       lat: item.latitude
        //     }
        //   }
        // })
        // 清空坐标
        map.clearOverlays()
        // let _this = this
        // var point = new BMap.Point(_this.center.lng, _this.center.lat)
        // map.centerAndZoom(point, 13)
        // var marker = new BMap.Marker(point) // 创建标注
        // map.addOverlay(marker) // 将标注添加到地图中
        // var circle = new BMap.Circle(point, 6, {
        //   strokeColor: 'Red',
        //   strokeWeight: 6,
        //   strokeOpacity: 1,
        //   Color: 'Red',
        //   fillColor: '#f03'
        // })
        // map.addOverlay(circle)
        // window.map = map

        if (this.centerList.length > 0) {
          this.centerList.forEach((item) => {
            let _this = this
            var point = new BMap.Point(item.longitude, item.latitude)
            map.setMapType(BMAP_HYBRID_MAP)
            var marker = new BMap.Marker(point) // 创建标注
            marker.setTitle(item.name)
            map.addOverlay(marker) // 将标注添加到地图中
            var circle = new BMap.Circle(point, 6, {
              strokeColor: 'Red',
              strokeWeight: 6,
              strokeOpacity: 1,
              Color: 'Red',
              fillColor: '#f03'
            })
            map.addOverlay(circle)
            window.map = map
          })
        }
      }
    },
    // 企业统计下拉框改变
    enterpriseStatisticsSelectChange () {
      this.entList = []
      this.selecedYear1 = this.year1.getFullYear().toString()
      let params = {}
      params.enterpriseType = this.enterpriseStatisticsSelect
      params.parkCode = this.parkCode
      params.years = this.selecedYear1
      this.$http.post(`/home/chemical/parkInfo/getEnterpriseNew`, params).then(({ data: res }) => {
        if (res.code === 0) {
          res.data.forEach(item => {
            this.entList.push(
              {
                entName:item
              }
            )
          })
        }
      })
    },
    handler ({ BMap, map }) {
      // var point = new BMap.Point(120.143872, 30.186099)
      // var point = new BMap.Point(119.406504, 29.54873)
      this.map = map
      map.setMapType(BMAP_HYBRID_MAP)
      if (this.centerList.length > 0) {
        this.center.lng = this.centerList[0].cityLongitude
        this.center.lat = this.centerList[0].cityLatitude
        this.centerList.forEach((item) => {
          let _this = this
          var point = new BMap.Point(item.longitude, item.latitude)
          var marker = new BMap.Marker(point) // 创建标注
          marker.setTitle(item.name)
          // map.addControl(new BMap.MapTypeControl({
          //   mapTypes:[
          //           BMAP_NORMAL_MAP,
          //           BMAP_HYBRID_MAP
          //       ]}));	
          map.addOverlay(marker) // 将标注添加到地图中
          var circle = new BMap.Circle(point, 6, {
            strokeColor: 'Red',
            strokeWeight: 6,
            strokeOpacity: 1,
            Color: 'Red',
            fillColor: '#f03',
          })
          map.addOverlay(circle)
          window.map = map
        })
      }
      // let _this = this
      // var point = new BMap.Point(_this.center.lng, _this.center.lat)
      // map.centerAndZoom(point, 15)
      // var marker = new BMap.Marker(point) // 创建标注
      // map.addOverlay(marker) // 将标注添加到地图中
      // var circle = new BMap.Circle(point, 6, {
      //   strokeColor: 'Red',
      //   strokeWeight: 6,
      //   strokeOpacity: 1,
      //   Color: 'Red',
      //   fillColor: '#f03'
      // })
      // map.addOverlay(circle)
      // window.map = map
    },
    getClickInfo (e) {
      this.center.lng = e.point.lng
      this.center.lat = e.point.lat
    },
    changeCellStyle (row, column, rowIndex, columnIndex) {
      let returnStyle
      returnStyle = 'padding: 0px;'
      if (row.column.label === '园区地址') {
        return returnStyle + 'color: #2690F3;'
      } else {
        return returnStyle
      }
    },
    selectTableRowData (row, column, event) {
      this.mapInput = row.parkName
      this.SearchPark(this.mapInput)
    },
    // 初始化园区经济排名
    initParkRank () {
      let parkRank = echarts.init(this.$refs['parkRank'])
      parkRank.clear()
      parkRank.setOption(this.option2)
    },
    // 切换园区
    parkChange (data) {
      if (data === '[object Object]') {
        let parkDetail = JSON.parse(sessionStorage.getItem('zfParkManagementParkCode'))
        this.parkCode = parkDetail.code
        this.centerList = parkDetail.coordinateList
      } else {
        sessionStorage.setItem('zfParkManagementParkCode', JSON.stringify(data))
        this.parkCode = data.code
        this.centerList = data.coordinateList
      }
      this.getIntroduce()
      
      // this.center.lng = data.coordinateList[0].longitude
      // this.center.lat = data.coordinateList[0].latitude
      // var point = new BMap.Point(this.center.lng, this.center.lat)
      // map.centerAndZoom(point, 15)
      this.enterpriseStatisticsSelect = '1'
      this.fetchData()
      this.SearchPark()
      this.enterpriseStatisticsSelectChange()
    },
    // 取园区介绍
    getIntroduce () {
      this.parkCode2 = this.$route.query.data.code
      this.$http.post(`/home/chemical/parkInfo/getParkDetailByCode`, {
        parkCode:this.parkCode2
      }).then(({ data: res }) => {
        if (res.code === 0) {
          this.msg = res.data.parkDetails
          this.start()
        }
      })
    },
    // 初始化查询数据
    fetchData () {
      let params = {}
      params.enterpriseType = this.enterpriseStatisticsSelect
      params.parkCode = this.parkCode
      this.$http.post(`/home/chemical/parkInfo/getParkManagement`, params).then(({ data: res }) => {
        if (res.code === 0) {
          let data = []
          let mydata = []
          if(res.data.parkInfoOutputArray && res.data.parkInfoOutputArray.length > 0){
            this.parkRankDate = 0
            this.option2.xAxis.show = true
            this.option2.yAxis.show = true
            res.data.parkInfoOutputArray.forEach((item) => {
              let params = {}
              params.type = 'bar'
              params.data = item.value
              params.name = item.name[0]
              data.push(params)
              this.option2.series = data
              this.option2.xAxis.data = item.years
            })
          } else {
            this.option2.series = data
            this.option2.xAxis.data = []
            this.option2.xAxis.show = false
            this.option2.yAxis.show = false
            this.parkRankDate = 1
          }
          this.initParkRank()
          // if(res.data.enterpriseList && res.data.enterpriseList.length > 0){
          //   this.statistics = 0
          //   this.option1.xAxis.show = true
          //   this.option1.yAxis.show = true
          //   res.data.enterpriseList.forEach((item)=>{
          //     let myparams = {}
          //     myparams.type = 'bar'
          //     myparams.data = item.value
          //     myparams.name = item.name[0]
          //     mydata.push(myparams)
          //     this.option1.series = mydata
          //     this.option1.xAxis.data = item.years
          //   })
          // } else {
          //   this.option1.series = mydata
          //   this.option1.xAxis.data = []
          //   this.statistics = 1
          //   this.option1.xAxis.show = false
          //   this.option1.yAxis.show = false
          // }
          // this.getecharts()
        }
      })
    }
  }
}
</script>
<style lang='scss' scoped>
.intrdouce{
  width:98%;
  height:26px;
  left:1%;
  top:8px;
  position:absolute;
  z-index:9999;border:1px solid blue;
  background-color:#FFFFFF;
  opacity:0.5;
  font-weight:600;
  font-size:20px;
  overflow: hidden;
}
.yuanqu{
  height: 825px;
  // width: 1160px;
  width: 100%;
  .left_baidu{
    position: relative;
    background: #FFFFFF;
    border: 1px solid #F0F0F0;
    box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    // margin: 20px;
    height: 720px;
    // width: 685px;
    width: 100%;
      .left_table{
        width: 100%;
        font-size: 10px;
        height: 170px;
        overflow: auto;
      }  }
  .right_all{
    height: 720px;
    // width: 450px;
    width: 100%;
    margin-bottom: 20px;
    .right_top{
      height: 350px;
      // width: 455px;
      width: 100%;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      .right_table{
        width: 100%;
        font-size: 8px;
        height: 200px;
        overflow: auto;
      }
    }
    .right_center{
      height: 350px;
      // width: 455px;
      width: 100%;
      // margin: 20px 0px 20px 0px;
      margin: 20px 0px 0px 0px;
      background: #FFFFFF;
      border: 1px solid #F0F0F0;
      box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
    }
  }
}
</style>
<style>
.blue .el-input-group__append{
  background-color: #2690F3;
}
</style>
